import { ref } from 'vue'

/**
 * 该函数，就是我们从组件中抽离出来的一个可以复用的函数
 */
export default () => {
  const count = ref(10)
  console.log('count', count)

  const fn1 = () => {
    console.log('fn1', this)
    // 如果让模板中的 count++
    // 获取 count 的值
    console.log('count', count)
    count.value++
    console.log('count', count)
  }

  const fn2 = () => {
    console.log('fn2')
    // PS: count 是一个 ref() 创建的响应式数据，它是一个对象，在JS部分需要 .value 去获取它的值和修改它的值。
    //     而在模板template中使用该 count 时，无需 .value
    count.value--
  }

  return {
    count,
    fn1,
    fn2,
  }
}
